Data Tables

Data tables are an enhanced version of an HTML table and are used to display tabular data.

Basedev ready

Preview

Code

<table class="slds-table slds-table--bordered">
  <thead>
    <tr class="slds-text-heading--label">
      <th class="slds-cell-shrink">
        <label class="slds-checkbox">
          <input type="checkbox" name="options" />
          <span class="slds-checkbox--faux"></span>
          <span class="slds-assistive-text">Select All</span>
        </label>
      </th>
      <th class="slds-is-sortable" scope="col">
        <div class="slds-truncate">Opportunity Name
          <button class="slds-button slds-button--icon-bare">
            <svg aria-hidden="true" class="slds-button__icon slds-button__icon--small">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#arrowdown"></use>
            </svg>
            <span class="slds-assistive-text">Sort</span>
          </button>
        </div>
      </th>
      <th class="slds-is-sortable" scope="col">
        <div class="slds-truncate">Account Name
          <button class="slds-button slds-button--icon-bare">
            <svg aria-hidden="true" class="slds-button__icon slds-button__icon--small">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#arrowdown"></use>
            </svg>
            <span class="slds-assistive-text">Sort</span>
          </button>
        </div>
      </th>
      <th class="slds-is-sortable" scope="col">
        <div class="slds-truncate">Close Date
          <button class="slds-button slds-button--icon-bare">
            <svg aria-hidden="true" class="slds-button__icon slds-button__icon--small">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#arrowdown"></use>
            </svg>
            <span class="slds-assistive-text">Sort</span>
          </button>
        </div>
      </th>
      <th class="slds-is-sortable" scope="col">
        <div class="slds-truncate">Stage
          <button class="slds-button slds-button--icon-bare">
            <svg aria-hidden="true" class="slds-button__icon slds-button__icon--small">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#arrowdown"></use>
            </svg>
            <span class="slds-assistive-text">Sort</span>
          </button>
        </div>
      </th>
      <th class="slds-is-sortable" scope="col">
        <div class="slds-truncate">Confidence
          <button class="slds-button slds-button--icon-bare">
            <svg aria-hidden="true" class="slds-button__icon slds-button__icon--small">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#arrowdown"></use>
            </svg>
            <span class="slds-assistive-text">Sort</span>
          </button>
        </div>
      </th>
      <th class="slds-is-sortable" scope="col">
        <div class="slds-truncate">Amount
          <button class="slds-button slds-button--icon-bare">
            <svg aria-hidden="true" class="slds-button__icon slds-button__icon--small">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#arrowdown"></use>
            </svg>
            <span class="slds-assistive-text">Sort</span>
          </button>
        </div>
      </th>
      <th class="slds-is-sortable" scope="col">
        <div class="slds-truncate">Contact
          <button class="slds-button slds-button--icon-bare">
            <svg aria-hidden="true" class="slds-button__icon slds-button__icon--small">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#arrowdown"></use>
            </svg>
            <span class="slds-assistive-text">Sort</span>
          </button>
        </div>
      </th>
      <th class="slds-cell-shrink"></th>
    </tr>
  </thead>
  <tbody>
    <tr class="slds-hint-parent">
      <td class="slds-cell-shrink" data-label="Select Row">
        <label class="slds-checkbox">
          <input type="checkbox" name="options" />
          <span class="slds-checkbox--faux"></span>
          <span class="slds-assistive-text">Select Row</span>
        </label>
      </td>
      <th class="slds-truncate" scope="row" data-label="Opportunity Name">Cloudhub</th>
      <td class="slds-truncate" data-label="Account Name">Cloudhub</td>
      <td class="" data-label="Close Date">4/14/2015</td>
      <td class="slds-truncate" data-label="Prospecting">Prospecting</td>
      <td class="" data-label="Confidence">20%</td>
      <td class="" data-label="Amount">$25k</td>
      <td class="slds-truncate" data-label="Contact"><a href="#void">jrogers@cloudhub.com</a></td>
      <td class="slds-cell-shrink" data-label="Actions">
        <button class="slds-button slds-button--icon-border-filled slds-button--icon-x-small">
          <svg aria-hidden="true" class="slds-button__icon slds-button__icon--hint slds-button__icon--small">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
          </svg>
          <span class="slds-assistive-text">Show More</span>
        </button>
      </td>
    </tr>
    <tr class="slds-hint-parent">
      <td class="slds-cell-shrink" data-label="Select Row">
        <label class="slds-checkbox">
          <input type="checkbox" name="options" />
          <span class="slds-checkbox--faux"></span>
          <span class="slds-assistive-text">Select Row</span>
        </label>
      </td>
      <th class="slds-truncate" scope="row" data-label="Opportunity Name">Cloudhub + Anypoint Connectors</th>
      <td class="slds-truncate" data-label="Account Name">Cloudhub</td>
      <td class="" data-label="Close Date">4/14/2015</td>
      <td class="slds-truncate" data-label="Prospecting">Prospecting</td>
      <td class="" data-label="Confidence">20%</td>
      <td class="" data-label="Amount">$25k</td>
      <td class="slds-truncate" data-label="Contact"><a href="#void">jrogers@cloudhub.com</a></td>
      <td class="slds-cell-shrink" data-label="Actions">
        <button class="slds-button slds-button--icon-border-filled slds-button--icon-x-small">
          <svg aria-hidden="true" class="slds-button__icon slds-button__icon--hint slds-button__icon--small">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
          </svg>
          <span class="slds-assistive-text">Show More</span>
        </button>
      </td>
    </tr>
  </tbody>
</table>

Responsiveprototype

Preview

Code

<table class="slds-table slds-table--bordered slds-max-medium-table--stacked-horizontal">
  <thead>
    <tr class="slds-text-heading--label">
      <th class="slds-cell-shrink">
        <label class="slds-checkbox">
          <input type="checkbox" name="options" />
          <span class="slds-checkbox--faux"></span>
          <span class="slds-assistive-text">Select All</span>
        </label>
      </th>
      <th class="slds-is-sortable" scope="col">
        <div class="slds-truncate">Opportunity Name
          <button class="slds-button slds-button--icon-bare">
            <svg aria-hidden="true" class="slds-button__icon slds-button__icon--small">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#arrowdown"></use>
            </svg>
            <span class="slds-assistive-text">Sort</span>
          </button>
        </div>
      </th>
      <th class="slds-is-sortable" scope="col">
        <div class="slds-truncate">Account Name
          <button class="slds-button slds-button--icon-bare">
            <svg aria-hidden="true" class="slds-button__icon slds-button__icon--small">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#arrowdown"></use>
            </svg>
            <span class="slds-assistive-text">Sort</span>
          </button>
        </div>
      </th>
      <th class="slds-is-sortable" scope="col">
        <div class="slds-truncate">Close Date
          <button class="slds-button slds-button--icon-bare">
            <svg aria-hidden="true" class="slds-button__icon slds-button__icon--small">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#arrowdown"></use>
            </svg>
            <span class="slds-assistive-text">Sort</span>
          </button>
        </div>
      </th>
      <th class="slds-is-sortable" scope="col">
        <div class="slds-truncate">Stage
          <button class="slds-button slds-button--icon-bare">
            <svg aria-hidden="true" class="slds-button__icon slds-button__icon--small">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#arrowdown"></use>
            </svg>
            <span class="slds-assistive-text">Sort</span>
          </button>
        </div>
      </th>
      <th class="slds-is-sortable" scope="col">
        <div class="slds-truncate">Confidence
          <button class="slds-button slds-button--icon-bare">
            <svg aria-hidden="true" class="slds-button__icon slds-button__icon--small">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#arrowdown"></use>
            </svg>
            <span class="slds-assistive-text">Sort</span>
          </button>
        </div>
      </th>
      <th class="slds-is-sortable" scope="col">
        <div class="slds-truncate">Amount
          <button class="slds-button slds-button--icon-bare">
            <svg aria-hidden="true" class="slds-button__icon slds-button__icon--small">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#arrowdown"></use>
            </svg>
            <span class="slds-assistive-text">Sort</span>
          </button>
        </div>
      </th>
      <th class="slds-is-sortable" scope="col">
        <div class="slds-truncate">Contact
          <button class="slds-button slds-button--icon-bare">
            <svg aria-hidden="true" class="slds-button__icon slds-button__icon--small">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#arrowdown"></use>
            </svg>
            <span class="slds-assistive-text">Sort</span>
          </button>
        </div>
      </th>
      <th class="slds-cell-shrink"></th>
    </tr>
  </thead>
  <tbody>
    <tr class="slds-hint-parent">
      <td class="slds-cell-shrink" data-label="Select Row">
        <label class="slds-checkbox">
          <input type="checkbox" name="options" />
          <span class="slds-checkbox--faux"></span>
          <span class="slds-assistive-text">Select Row</span>
        </label>
      </td>
      <th class="slds-truncate" scope="row" data-label="Opportunity Name">Cloudhub</th>
      <td class="slds-truncate" data-label="Account Name">Cloudhub</td>
      <td class="" data-label="Close Date">4/14/2015</td>
      <td class="slds-truncate" data-label="Prospecting">Prospecting</td>
      <td class="" data-label="Confidence">20%</td>
      <td class="" data-label="Amount">$25k</td>
      <td class="slds-truncate" data-label="Contact"><a href="#void">jrogers@cloudhub.com</a></td>
      <td class="slds-cell-shrink" data-label="Actions">
        <button class="slds-button slds-button--icon-border-filled slds-button--icon-x-small">
          <svg aria-hidden="true" class="slds-button__icon slds-button__icon--hint slds-button__icon--small">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
          </svg>
          <span class="slds-assistive-text">Show More</span>
        </button>
      </td>
    </tr>
    <tr class="slds-hint-parent">
      <td class="slds-cell-shrink" data-label="Select Row">
        <label class="slds-checkbox">
          <input type="checkbox" name="options" />
          <span class="slds-checkbox--faux"></span>
          <span class="slds-assistive-text">Select Row</span>
        </label>
      </td>
      <th class="slds-truncate" scope="row" data-label="Opportunity Name">Cloudhub + Anypoint Connectors</th>
      <td class="slds-truncate" data-label="Account Name">Cloudhub</td>
      <td class="" data-label="Close Date">4/14/2015</td>
      <td class="slds-truncate" data-label="Prospecting">Prospecting</td>
      <td class="" data-label="Confidence">20%</td>
      <td class="" data-label="Amount">$25k</td>
      <td class="slds-truncate" data-label="Contact"><a href="#void">jrogers@cloudhub.com</a></td>
      <td class="slds-cell-shrink" data-label="Actions">
        <button class="slds-button slds-button--icon-border-filled slds-button--icon-x-small">
          <svg aria-hidden="true" class="slds-button__icon slds-button__icon--hint slds-button__icon--small">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
          </svg>
          <span class="slds-assistive-text">Show More</span>
        </button>
      </td>
    </tr>
  </tbody>
</table>

When a table exceeds the width of its container, one responsive option is to wrap the table in a .slds-scrollable--x class so that the user can scroll horizontally. View the example small and medium form factor tabs to see the effect.

When .slds-max-medium-table--stacked is applied to the “Grid” table, we generate faux <th> labels using the data-label applied to each cell, and stack the cells instead of lining them up horizontally. This works up until the medium form factor breakpoint. After the breakpoint is triggered, the table will lay out horizontally as normal.

When .slds-max-medium-table--stacked is applied to the “Grid” table, we generate faux <th> labels using the data-label applied to each cell, and stack the cells instead of lining them up horizontally. This works up until the medium form factor breakpoint. After the breakpoint is triggered, the table will lay out horizontally as normal.

Component Overview

To initialize a data table, apply the .slds-table class to the table element. This class creates a table with formatted cells and allows you to use data table utilities.

Accessibility

To create an accessible table, the top row of column headers (th) are placed in a thead. Each one receives the scope="col" attribute. The first non-actionable (meaning that doesn't contain a checkbox or menu) column in each row should be marked as a th with a scope="row" attribute.

Usage

This table gives you a quick overview of the SLDS CSS classes that can be applied to this component.
Class NameUsage
.slds-table
Applied to:

<table>

Outcome:

Initializes data table

Required:

Required

Comments:

--

.slds-table--bordered
Applied to:

.slds-table

Outcome:

Adds borders to the table

Required:

No, optional element or modifier

Comments:

--

.slds-table--striped
Applied to:

.slds-table

Outcome:

Adds stripes to alternating rows

Required:

No, optional element or modifier

Comments:

--

.slds-table--fixed-layout
Applied to:

.slds-table

Outcome:

Styles for resizeable columns

Required:

No, optional element or modifier

Comments:

--

.slds-is-selected
Applied to:

<tr>

Outcome:

Changes row to selected state

Required:

No, optional element or modifier

Comments:

--

.slds-is-sortable
Applied to:

<th>

Outcome:

Enables user interactions for sorting a column

Required:

No, optional element or modifier

Comments:

--

.slds-is-resizable
Applied to:

<th>

Outcome:

Enables table cell to be resized

Required:

No, optional element or modifier

Comments:

--

.slds-cell-wrap
Applied to:

<td>

Outcome:

Forces text to wrap in a cell

Required:

No, optional element or modifier

Comments:

--

.slds-cell-shrink
Applied to:

<th>, <td>

Outcome:

Shrinks cell to width of content

Required:

No, optional element or modifier

Comments:

Use if cell contains a checkbox or action menu

.slds-no-row-hover
Applied to:

.slds-table

Outcome:

Removes hover state on row

Required:

No, optional element or modifier

Comments:

Rows have a hover state by default

.slds-scrollable--x
Applied to:

parent div

Outcome:

Creates a scrollable container for a table on smaller viewports

Required:

No, optional element or modifier

Comments:

--

.slds-max-medium-table--stacked
Applied to:

.slds-table

Outcome:

Modifies table layout by stacking cells to accommodate smaller viewports

Required:

No, optional element or modifier

Comments:

--

.slds-max-medium-table--stacked-horizontal
Applied to:

.slds-table

Outcome:

Modifies table layout by displaying the header and row data side by side for smaller viewports

Required:

No, optional element or modifier

Comments:

--

.slds-hint-parent
Applied to:

<tr>

Outcome:

Highlights action overflow ribbons on row hover

Required:

No, optional element or modifier

Comments:

When you have an overflow action menu